<template>
  <div class="page-wrapper">
    <div class="contact-card">
      <div class="card-header">
        <h1>MOLE茉莉 与 Apple联系技术支持</h1>
        <p>请填写以下信息，我们的支持团队将尽快回复您</p>
      </div>

      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="name" class="required">姓名</label>
          <input type="text" id="name" v-model="form.name" required />
        </div>

        <div class="form-group">
          <label for="email" class="required">电子邮件</label>
          <input type="email" id="email" v-model="form.email" required />
        </div>

        <div class="form-group">
          <label for="issueType" class="required">问题类型</label>
          <select id="issueType" v-model="form.issueType" required>
            <option value="">请选择问题类型</option>
            <option value="technical">技术问题</option>
            <option value="billing">账单问题</option>
            <option value="account">账户问题</option>
            <option value="feature">功能建议</option>
            <option value="other">其他</option>
          </select>
        </div>

        <div class="form-group">
          <label for="message" class="required">消息</label>
          <textarea
            id="message"
            v-model="form.message"
            placeholder="请详细描述您遇到的问题或需求..."
            required
          ></textarea>
        </div>

        <button type="submit" class="submit-button">提交请求</button>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineOptions({ name: 'ContactSupport' })

  const form = reactive({
    name: '',
    email: '',
    issueType: '',
    message: ''
  })

  function handleSubmit() {
    // 模拟提交逻辑
    alert(`感谢您的提交！\n姓名：${form.name}\n邮件：${form.email}`)
    // 重置表单
    Object.assign(form, { name: '', email: '', issueType: '', message: '' })
  }
</script>

<style lang="scss" scoped>
  @use './style';
</style>
